@import "./var";
@import "./mixin";

.progress-bar {
  $height: 30px;
  background-color: lighten($color-primary, 40);
  box-shadow:inset 0px 0px 10px rgba(0, 0, 0, 0.4);
  width: 400px;
  padding: 0 0 0 20px;
  justify-content: center;
  height: $height;
  border-radius: $height;
  position: relative;
  &-fill {
    background-color: lighten($brand-primary, 20);
    height: $height;
    justify-content: center;
    padding: 0  0 0 20px;
    position: absolute;
    border-radius: $height;
    top: 0;
    left: 0;
    overflow: hidden;
    &-text {
      font-size: 22px;
      color: #ffffff;
      width: 300px;
    }
  }
  &-bg-text {
    font-size: 22px;
    color: $color-primary;
  }
  margin-bottom: 20px;
}